<template>
  <div class="card" v-if="item" @click.stop="toDetail">
    <!-- 图片广告 -->
    <div
      class="img-box"
      :style="{ backgroundImage: `url(${item.cover})` }"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["item"],
  methods: {
    toDetail() {
      this.$router.push({
        name: "detail",
        params: {
          bookid: this.item.id,
          title: this.item.title,
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.card {
  width: 100%;
  .img-box {
    position: relative;
    width: 100%;
    aspect-ratio: 350/120;
    border-radius: 0.12rem;
    overflow: hidden;
    &::after {
      position: absolute;
      content: "";
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: var(--bgc-black);
      opacity: 0.1;
    }
  }
}
</style>